<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频上传与目标检测</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .video-container {
            margin-top: 20px;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
        }
        .processing-status {
            margin-top: 10px;
            display: none;
        }
        .progress-bar {
            width: 0%;
            transition: width 0.3s ease;
        }
        .video-error {
            color: red;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="mt-4">视频上传与目标检测</h1>

    <div class="card mt-4">
        <div class="card-body">
            <h5 class="card-title">视频上传</h5>
            <form th:action="@{/video/upload}" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="file">选择视频文件</label>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="file" name="file" accept="video/*">
                        <label class="custom-file-label" for="file">选择文件</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">上传视频</button>
            </form>
        </div>
    </div>

    <div th:if="${message}" class="alert alert-info mt-4" th:text="${message}"></div>

    <div class="video-container" th:if="${originalVideoPath}">
        <h3>原始视频</h3>
        <video controls width="100%">
            <source th:src="@{${originalVideoPath}}" type="video/mp4">
            您的浏览器不支持视频播放
        </video>
        <div class="mt-3">
            <button id="processVideo" class="btn btn-success">进行目标检测</button>
        </div>
    </div>

    <div class="processing-status" id="processingStatus">
        <div class="progress">
            <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div id="processingMessage" class="mt-2">正在处理视频...</div>
    </div>

    <div class="video-container" id="processedVideoContainer" style="display: none">
        <h3>目标检测结果视频</h3>
        <video controls width="100%" id="processedVideo">
            <source id="processedVideoSource" type="video/mp4">
            您的浏览器不支持视频播放
        </video>
        <div class="video-error" id="videoError">视频加载失败，请检查文件格式或路径</div>
    </div>

    <div class="mt-4" id="processingResult" style="display: none">
        <h3>处理结果</h3>
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                <tr>
                    <th>处理状态</th>
                    <td id="resultStatus">成功</td>
                </tr>
                <tr>
                    <th>处理时间</th>
                    <td id="processingTime">0 ms</td>
                </tr>
                <tr>
                    <th>处理帧数</th>
                    <td id="framesProcessed">0</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    if (typeof jQuery !== 'undefined') {
        $(document).ready(function() {
            console.log("页面加载完成，jQuery已就绪");

            // 文件选择标签更新
            $("#file").change(function() {
                var fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').html(fileName);
            });

            // 视频加载错误处理
            $("#processedVideo").on('error', function() {
                console.error("视频加载错误");
                $("#videoError").show();
            });

            // 处理视频按钮点击事件
            $("#processVideo").click(function() {
                var originalPath = '[[${originalVideoPath}]]';
                console.log("原始视频路径: " + originalPath);

                if (!originalPath || originalPath === "") {
                    alert("请先上传视频");
                    return;
                }

                // 重置错误提示
                $("#videoError").hide();

                // 显示处理状态
                $("#processingStatus").show();
                $("#processedVideoContainer").hide();
                $("#processingResult").hide();

                // 重置进度条
                $(".progress-bar").width("0%");
                var progress = 0;
                var progressInterval = setInterval(function() {
                    progress += 5;
                    if (progress > 95) clearInterval(progressInterval);
                    $(".progress-bar").width(progress + "%");
                }, 500);

                // 提取视频文件名
                var videoFileName = originalPath.substring(originalPath.lastIndexOf('/') + 1);
                console.log("提取的视频文件名: " + videoFileName);

                $.ajax({
                    url: "/video/process",
                    type: "POST",
                    data: { videoPath: videoFileName },
                    success: function(result) {
                        console.log("处理结果: ", result);
                        clearInterval(progressInterval);
                        $(".progress-bar").width("100%");

                        if (result.success) {
                            $("#resultStatus").text("成功");
                            $("#processingTime").text(result.processingTime + " ms");
                            $("#framesProcessed").text(result.framesProcessed);

                            // 设置视频源并尝试加载
                            $("#processedVideoSource").attr("src", result.processedVideoPath);
                            $("#processedVideo")[0].load(); // 手动触发加载

                            $("#processedVideoContainer").show();
                            $("#processingResult").show();
                        } else {
                            $("#resultStatus").text("失败");
                            $("#processingMessage").text("处理失败: " + result.message);
                            $("#processingResult").show();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("处理错误: ", error);
                        clearInterval(progressInterval);
                        $(".progress-bar").width("100%");
                        $("#resultStatus").text("失败");
                        $("#processingMessage").text("处理过程中发生错误: " + error);
                        $("#processingResult").show();
                    },
                    complete: function() {
                        setTimeout(function() {
                            $(".progress-bar").width("0%");
                            $("#processingStatus").hide();
                        }, 2000);
                    }
                });
            });
        });
    } else {
        console.error('jQuery未加载，应用程序无法运行');
        alert('系统错误：无法加载必要的资源，请刷新页面');
    }
</script>
</body>
</html>